<template>
  <div class="app-table">
    <!-- 固定表头 -->
    <el-table
      v-if="height"
      :height="height"
      :data="curData"
      :border="border"
      :stripe="stripe">
      <slot></slot>
    </el-table>
    <!-- 不固定表头 -->
    <el-table
      v-else
      :data="curData"
      :border="border"
      :stripe="stripe">
      <slot></slot>
    </el-table>
    <el-pagination
      class="pagination"
      layout="prev, pager, next"
      :total="total"
      :page-size="pagesize"
      :current-page="curPage"
      @current-change="handleChange">
    </el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    pagesize: {
      type: Number,
      default: 10,
    },
    border: {
      type: Boolean,
      default: true
    },
    stripe: {
      type: Boolean,
      default: true
    },
    height: {
      type: [ String, Number ],
      default: ''
    }
  },
  data () {
    return {
      curPage: 1
    }
  },
  computed: {
    total () {
      return this.data.length
    },
    curData () {
      const pagesize = this.pagesize
      const offset = (this.curPage - 1) * pagesize
      return this.data.slice(offset, offset + pagesize)
    }
  },
  methods: {
    reset () {
      this.curPage = 1
    },
    handleChange (page) {
      this.curPage = page
    }
  }
}
</script>
<style lang="scss" scoped>
  .pagination {
    text-align: right;
  }
</style>